<template>
    <div>
        <el-container style="">
            <!-- ---------------侧部导航栏 -->
            <el-aside width="200px" style="height: 100vh;position:sticky;">
                <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    :collapse="isCollapse" background-color="#001428" style="height: 100vh;">
                    <el-menu-item index="0">
                        <span slot="title">
                            <h2>
                                <p style="color: black;">WeBlog</p>
                            </h2>
                        </span>
                    </el-menu-item>
                    <el-menu-item index="1">
                        <i class="el-icon-document"></i>
                        <span slot="title"> <router-link class="sub-items" to="dashboard">仪表盘</router-link></span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-document"></i>
                        <span slot="title"><router-link class="sub-items" to="articlemanage">文章管理</router-link></span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-setting"></i>
                        <span slot="title"><router-link class="sub-items" to="classmanage">分类管理</router-link></span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title"><router-link class="sub-items" to="tagsmanage">标签管理</router-link></span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-setting"></i>
                        <span slot="title"><router-link class="sub-items" to="setuser">博客设置</router-link></span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!-- ------------------头部功能区 -->
            <el-container>
                <el-header style="background-color: white;">
                    <div style="display: flex;justify-content: space-between;">
                        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                            <el-radio-button :label="false">展开</el-radio-button>
                            <el-radio-button :label="true">收起</el-radio-button>
                        </el-radio-group>
                        <div class="right">
                            <a href="" @click.prevent="goToAbout">跳转博客前台</a>
                            <a href="" @click.prevent="refresh">刷新</a>
                            <a href="" @click.prevent="fullScreen">全屏</a>
                            <img :src="userList.data.avatar" alt=""
                                style="width: 30px;height: 30px;border-radius: 70%;">
                            <el-dropdown @command="handleCommand">
                                <span class="el-dropdown-link">
                                    {{ userList.data.username }}<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="a">修改密码</el-dropdown-item>
                                    <el-dropdown-item command="b">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>

                        </div>
                    </div>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
                <el-footer style="background-color: white;">
                    <p style="color: gray;">Copyright © 2023. All rights reserved. Provided by
                        犬小哈</p>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    created() {
        this.getUser()
    },
    data() {
        return {
            isCollapse: false,//控制侧边栏
            userList: {},

        };
    },
    methods: {
        // 打开侧边栏
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        //关闭侧边栏
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        //刷新事件
        refresh() {
            window.location.reload()
        },
        //全屏事件
        fullScreen() {
            console.log("全屏按钮");

        },
        //用户栏点击事件
        handleCommand(command) {
            if (command === 'b') { // 退出登录
                localStorage.removeItem('adminToken');
                delete this.$axios.defaults.headers.common['Authorization'];
                this.$router.push('/login');
                this.$message.success('已退出登录');
            }
        },

        // 获取用户数据
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        goToAbout() {
            this.$router.push('/about')
        },
        async getUser() {
            const res = await this.$axios.post('/api/admin/detail');
            if (res.data.success) {
                this.userList = res.data;
                console.log(this.userList);

            } else {
                this.$message.error(`获取失败：${res.data.message || '未知错误'}`);
            }
        },

    }
}
</script>

<style scoped>
.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.right a {
    text-decoration: none;
    color: gray;
    padding: 20px 10px 10px 10px;
}

.sub-items {
    text-decoration: none;
    color: gray;
}
</style>